<!--
@license
Copyright 2016 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-checkbox/paper-checkbox.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/image-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-button/paper-button.html">

<link rel="import" href="vz-projector-data-panel.html">
<link rel="import" href="vz-projector-bookmark-panel.html">
<link rel="import" href="vz-projector-input.html">

<dom-module id='vz-projector'>
<template>
<style>

:host {
  display: flex;
  width: 100%;
  height: 100%;
}

#container {
  display: flex;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
}

/* Main */

#main {
  position: relative;
  flex-grow: 2;
}

#main .stage {
  position: relative;
  flex-grow: 2;
}

#scatter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#left-pane {
  display: flex;
  flex-direction: column;
  min-width: 312px;
  width: 312px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
}

#right-pane {
  min-width: 300px;
  width: 300px;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background: #fafafa;
}

.file-name {
  margin-right: 5px;
}

.control label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 10px;
  font-weight: 500;
}

.control .info {
  display: block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 18px;
}

.control input[type=text] {
  font-weight: 300;
  font-size: 16px;
  display: block;
  padding: 8px 0;
  margin: 0 0 8px 0;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: none;
}

.slider {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;
}

.slider span {
  width: 35px;
  text-align: right;
}

.slider label {
  width: 100%;
}

.control input[type=text]:focus {
  outline: none;
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}

.control {
  display: inline-block;
  width: 45%;
  vertical-align: top;
  margin-right: 10px;
  overflow-x: hidden;
}

.control.last {
  margin-right: 0;
}

#wrapper-notify-msg {
  z-index: 1;
  position: fixed;
  top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

#notify-msg {
  display: none;
  font-weight: 500;
  color: black;
  background-color: #FFF9C4;
  padding: 5px;
  border: 1px solid #FBC02D;
}

#warning-msg {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 5px;
  font-weight: 500;
  color: black;
  background-color: #ffb3b6;
  border: 1px solid black;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.nn-list .neighbor {
  font-size: 12px;
  margin-bottom: 6px;
}

.nn-list .neighbor .value {
  float: right;
  color: #666;
  font-weight: 300;
}

.nn-list .neighbor .bar {
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  margin: 2px 0;
}

.nn-list .neighbor .bar .fill {
  position: absolute;
  top: -1px;
  border-top: 1px solid white;
}

.nn-list .neighbor .tick {
  position: absolute;
  top: 0px;
  height: 3px;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.nn-list .neighbor-link:hover {
  cursor: pointer;
}

.origin text {
  font-size: 12px;
  font-weight: 500;
}

.origin line {
  stroke: black;
  stroke-opacity: 0.2;
}

/* Ink Framework */

/* - Buttons */
.ink-button, ::shadow .ink-button {
  border: none;
  border-radius: 2px;
  font-size: 13px;
  padding: 10px;
  min-width: 100px;
  flex-shrink: 0;
  background: #e3e3e3;
}

/* - Tabs */

.ink-tab-group {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  height: 100%;
  margin: 0 12px;
}

.ink-tab-group .ink-tab {
  font-weight: 300;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  text-transform: uppercase;
  line-height: 60px;
  cursor: pointer;
  padding: 0 12px;
}

.ink-tab-group .ink-tab:hover {
  color: black;
}

.ink-tab-group .ink-tab.active {
  font-weight: 500;
  color: black;
  border-bottom: 2px solid black;

}

/* - Panel */

.ink-panel {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.ink-panel h4 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.ink-panel-header {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ink-panel-metadata-container {
  margin-top: 15px;
}

.ink-panel-metadata-container span {
  font-size: 16px;
}

.ink-panel-metadata {
  border-bottom: 1px solid #ccc;
  display: table;
  padding: 10px 0;
  width: 100%;
}

.ink-panel-metadata-row {
  display: table-row;
}

.ink-panel-metadata-key {
  font-weight: bold;
}

.ink-panel-metadata-key,
.ink-panel-metadata-value {
  display: table-cell;
  padding-right: 10px;
}

.ink-panel-buttons {
  margin-bottom: 10px;
}

.ink-panel-content {
  padding: 24px;
  overflow-y: auto;
  display: none;
  height: 100%;
}

.ink-panel-content.active {
  display: block;
}

.ink-panel-content .distance a {
  text-decoration: none;
  color: black;
}

.ink-panel-content .distance a.selected {
  color: black;
  border-bottom: 2px solid black;
}

.ink-panel-footer {
  display: flex;
  align-items: center;
  border-top: solid 1px #eee;
  height: 60px;
  padding: 0 24px;
  color: rgba(0, 0, 0, 0.5);
}

.ink-panel-content h3 {
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 5px;
}

.ink-panel-header h3 {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 60px;
  text-transform: uppercase;
  padding: 0 24px;
}

/* - Menubar */

.ink-panel-menubar {
  align-items: center;
  position: relative;
  height: 60px;
  border-bottom: solid 1px #eee;
  padding: 0 24px;
  display: flex;
}

.ink-panel-menubar .ink-fabs {
  position: absolute;
  right: 12px;
  top: 40px;
  z-index: 1;
}

.two-way-toggle {
  display: flex;
  flex-direction: row;
}

.two-way-toggle span {
  padding-right: 7px;
}

paper-listbox .pca-item {
  cursor: pointer;
  min-height: 17px;
  font-size: 12px;
  line-height: 17px;
}

.has-border {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

#bookmark-panel {
  bottom: 0;
  position: absolute;
  width: 300px;
}
#bookmark-panel-container {
  bottom: 60px;
  position: absolute;
}

.help-icon {
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
}

paper-tooltip {
  max-width: 200px;
  --paper-tooltip: {
    font-size: 12px;
  };
}

.toggle {
  min-width: 0px;
  font-size: 12px;
  width: 17px;
  min-height: 0px;
  height: 21px;
  padding: 0;
  margin: 0px;
}

.toggle[active] {
  background-color: #880E4F;
  color: white;
}

paper-checkbox {
  --paper-checkbox-checked-color: #880E4F;
}

paper-toggle-button {
  --paper-toggle-button-checked-bar-color:  #880E4F;
  --paper-toggle-button-checked-button-color:  #880E4F;
  --paper-toggle-button-checked-ink-color: #880E4F;
}

paper-icon-button {
  border-radius: 50%;
}

paper-icon-button[active] {
  color: white;
  background-color: #880E4F;
}

.ink-fab {
  margin-left: 8px;
  border: 1px solid rgba(0, 0, 0, 0.02);
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.two-columns {
  display:flex;
  justify-content: space-between;
}

.two-columns :first-child {
  margin-right: 15px;
}

</style>
<div id="wrapper-notify-msg">
  <div id="notify-msg">Loading...</div>
</div>
<div id="warning-msg"></div>
<div id="container">
  <div id="left-pane" class="ink-panel">
    <div class="ink-panel-header">
      <div class="ink-tab-group">
        <div data-tab="tsne" class="ink-tab" title="t-distributed stochastic neighbor embedding">t-SNE</div>
        <div data-tab="pca" class="ink-tab" title="Principal component analysis">PCA</div>
        <div data-tab="custom" class="ink-tab" title="Linear projection of two custom vectors">Custom</div>
      </div>
    </div>
    <!-- TSNE Controls -->
    <div data-panel="tsne" class="ink-panel-content">
      <p><a href="https://en.wikipedia.org/wiki/T-distributed_stochastic_neighbor_embedding">t-distributed stochastic neighbor embedding</a> is a dimensionality reduction technique.</p>
      <p style="color: #880E4F; font-weight: bold;">For fast results, your data will be sampled down to [[getTsneSampleSize()]] points.</p>
      <div class="slider"><label>Dimension</label><div class="two-way-toggle"><span>2D</span><paper-toggle-button id="tsne-toggle" checked>3D</paper-toggle-button></div></div>
      <div class="slider tsne-perplexity">
        <label>
          Perplexity
          <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
          <paper-tooltip position="right" animation-delay="0" fit-to-visible-bounds>
            The most appropriate perplexity value depends on the density of your
            data. Loosely speaking, one could say that a larger / denser dataset
            requires a larger perplexity. Typical values for the perplexity range
            between 5 and 50.
          </paper-tooltip>
        </label>
        <input type="range" min="2" max="100"></input>
        <span></span>
      </div>
      <div class="slider tsne-learning-rate">
        <label>
          Learning rate
          <paper-icon-button icon="help" class="help-icon"></paper-icon-button>
          <paper-tooltip position="right" animation-delay="0" fit-to-visible-bounds>
            The most appropriate learning rate depends on the size of your data,
            with smaller datasets requiring smaller learning rates.
          </paper-tooltip>
        </label>
        <input type="range" min="-3" max="2"></input>
        <span></span>
      </div>
      <p>
        <button class="run-tsne ink-button" title="Re-run t-SNE">Re-run</button>
        <button class="stop-tsne ink-button" title="Stop t-SNE">Stop</button>
      </p>
      <p>Iteration: <span class="run-tsne-iter">0</span></p>
    </div>
    <!-- PCA Controls -->
    <div data-panel="pca" class="ink-panel-content">
      <p><a href="https://en.wikipedia.org/wiki/Principal_component_analysis">Principal component analysis</a> is a dimensionality reduction technique.</p>
      <p style="color: #880E4F; font-weight: bold;">For fast results, your data will be sampled down to [[getPcaSampledDim()]] dimensions, so the PCA computation is approximate.</p>
      <label>X</label>
      <paper-listbox class="has-border" selected="{{pcaX}}">
        <template is="dom-repeat" items="[[pcaComponents]]">
          <paper-item class="pca-item">Component #[[item]]</paper-item>
        </template>
      </paper-listbox>
      <br/>
      <label>Y</label>
      <paper-listbox class="has-border" selected="{{pcaY}}">
        <template is="dom-repeat" items="[[pcaComponents]]">
          <paper-item class="pca-item">Component #[[item]]</paper-item>
        </template>
      </paper-listbox>
      <br/>
      <paper-checkbox id="z-checkbox" checked="{{hasPcaZ}}">Z</paper-checkbox>
      <paper-listbox class="has-border" disabled="true" selected="{{pcaZ}}">
        <template is="dom-repeat" items="[[pcaComponents]]">
          <paper-item disabled="[[!hasPcaZ]]" class="pca-item">Component #[[item]]</paper-item>
        </template>
      </paper-listbox>
    </div>
    <!-- Custom Controls -->
    <div data-panel="custom" class="ink-panel-content">
      <p>
        Search for two vectors upon which to project all points. Click the
        <code class="toggle" style="padding: 2px;">.*</code> button to enable
        regex mode. The search is case insensitive.
      <p>
      <h3>Horizontal</h3>
      <div class="two-columns">
        <vz-projector-input id="xLeft" label="Left"></vz-projector-input>
        <vz-projector-input id="xRight" label="Right"></vz-projector-input>
      </div>
      <h3>Vertical</h3>
      <div class="two-columns">
        <vz-projector-input id="yUp" label="Up"></vz-projector-input>
        <vz-projector-input id="yDown" label="Down"></vz-projector-input>
      </div>
    </div>
  </div>
  <div id="main" class="ink-panel">
    <div class="ink-panel-menubar">
      <paper-icon-button id="selectMode" alt="Bounding box selection" toggles icon="image:photo-size-select-small"></paper-icon-button>
      <paper-tooltip for="selectMode" position="bottom" animation-delay="0" fit-to-visible-bounds>Bounding box selection</paper-tooltip>

      <paper-icon-button id="nightDayMode" alt="Enable/disable night mode" toggles icon="image:brightness-2"></paper-icon-button>
      <paper-tooltip for="nightDayMode" position="bottom" animation-delay="0" fit-to-visible-bounds>Enable/disable night mode</paper-tooltip>

      <paper-icon-button id="labels3DMode" alt="Enable/disable 3D labels mode" toggles icon="flip-to-front"></paper-icon-button>
      <paper-tooltip for="labels3DMode" position="bottom" animation-delay="0" fit-to-visible-bounds>Enable/disable 3D labels mode</paper-tooltip>

      <div class="ink-fabs">
        <paper-icon-button id="reset-zoom" class="ink-fab" alt="Reset zoom to fit all points" icon="home"></paper-icon-button>
        <paper-tooltip for="reset-zoom" position="bottom" animation-delay="0" fit-to-visible-bounds>Reset zoom to fit all points</paper-tooltip>

        <paper-icon-button id="zoom-in" class="ink-fab" alt="Zoom in" icon="add"></paper-icon-button>
        <paper-tooltip for="zoom-in" position="bottom" animation-delay="0" fit-to-visible-bounds>Zoom in</paper-tooltip>

        <paper-icon-button id="zoom-out" class="ink-fab" alt="Zoom out" icon="remove"></paper-icon-button>
        <paper-tooltip for="zoom-out" position="bottom" animation-delay="0" fit-to-visible-bounds>Zoom out</paper-tooltip>
      </div>
    </div>
    <div class="stage">
      <div id="scatter"></div>
    </div>
    <div id="info-panel" class="ink-panel-footer">
      <div>
        Number of data points: <span class="numDataPoints"></span>, dimension of embedding: <span class="dim"></span>
        | <span id="hoverInfo"></span>
      </div>
    </div>
  </div>
  <div id="right-pane" class="ink-panel">
    <div class="ink-panel-header">
      <div class="ink-tab-group">
        <div data-tab="data" class="active ink-tab" title="Setup data">Data</div>
        <div data-tab="inspector" class="ink-tab" title="Inspect data">Inspector</div>
      </div>
    </div>

    <!-- Inspector UI controls -->
    <div data-panel="inspector" class="ink-panel-content">
      <div class="slider num-nn">
        <label>Number of neighbors</label>
        <input type="range" min="5" max="1000"></input>
        <span></span>
      </div>
      <vz-projector-input id="search-box" label="Search by label"></vz-projector-input>
      <div class="ink-panel-metadata-container" style="display: none">
        <span>Metadata</span>
        <div class="ink-panel-metadata"></div>
      </div>
      <div class="ink-panel-buttons">
        <div style="margin-bottom: 10px">
          <button style="display: none;" class="ink-button reset-filter">Show All Data</button>
        </div>
        <button style="display: none;" class="ink-button set-filter">Isolate selection</button>
        <button class="ink-button clear-selection" style="display: none;">Clear selection</button>
      </div>
      <div class="nn">
        <div class="distance">
          Distance:
          <div style="float:right">
            <a class="selected cosine" href="javascript:void(0);">cosine</a> |
            <a class="euclidean" href="javascript:void(0);">euclidean</a>
          </div>
        </div>
        <p>Nearest points:
        <div class="nn-list"></div>
      </div>
    </div>

    <!-- Data UI controls -->
    <div data-panel="data" class="active ink-panel-content">
      <vz-projector-data-panel id="data-panel" label-option="{{labelOption}}" color-option="{{colorOption}}"></vz-projector-data-panel>
    </div>

    <div id="bookmark-panel-container">
      <vz-projector-bookmark-panel id="bookmark-panel"></vz-projector-bookmark-panel>
    </div>
</div>
</template>
</dom-module>

